<template>
  <div>
    <el-card class="box-card card-header m-t-20">
      <div slot="header" class="clearfix f-medium">
        <i class="fa fa-list m-r-10 text-c-blue" aria-hidden="true"></i>
        <span>自动巡航计划列表</span>
      </div>
      <div class="">
        <div class="p-10 b-r-5 m-y-10 theme-bg new-plan f-large" @click="openMapView('add')">
          <i class="fa fa-edit m-l-10 m-r-5"></i>
          <span class="f-w-600">添加新计划</span>
          <span class="m-r-10 plus-icon"><i class="fa fa-plus"></i></span>
        </div>
        <TableCreator :colsConfig="columnConfig" :data="autoCruisePlans" stripe :height="320">
          <template #operation="{ row }">
            <el-button @click="openMapView('edit', row)" type="primary" size="small">编辑</el-button>
            <el-button @click="toDelete(row)" type="danger" size="small" plain>删除</el-button>
          </template>
        </TableCreator>
      </div>
    </el-card>
    <keep-alive>
      <MapDialog ref="mapDialog" />
    </keep-alive>
  </div>
</template>

<script>
import { columnConfig } from './config/planTableconfig'
import { MessageBox } from "element-ui";
import MapDialog from "./components/MapDialog.vue";
import { mapGetters } from "vuex";
export default {
  name: "PlanSetting",
  components: { MapDialog },
  data() {
    return {
      columnConfig
    };
  },
  mounted() {
    this.$store.dispatch("cruiseRecord/toGetPlansList");
  },
  computed: {
    ...mapGetters("cruiseRecord", ["autoCruisePlans"]),
  },
  methods: {
    // 打开地图窗口
    openMapView(type, item) {
      this.$refs.mapDialog.newPlanDialog = true;
      this.$nextTick(() => {
        switch (type) {
          case 'add':
            this.$refs.mapDialog.addView(); break;
          case 'edit':
            this.$refs.mapDialog.editView(item); break;
        }
      })
    },
    // 删除计划
    toDelete(item) {
      MessageBox.confirm(
        "删除计划会让该计划的所有记录一并删除，是否确定?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      )
        .then(async () => {
          await this.$store.dispatch("cruiseRecord/toDeleteThePlan", item.id);
        })
        .then(() => {
          this.$Notify('已删除一条计划');
        })
        .catch((err) => {
          if (err == "cancel") return;
          this.$Notify("请求异常，请稍后再试！", 'error');
        });
    },
  },
};
</script>

<style scoped lang="less">
.card-header {
  /deep/ .el-card__header {
    border-left: 5px solid var(--blue);
  }
}

.new-plan {
  transition: all 0.5s;
  cursor: pointer;

  .plus-icon {
    float: right;
    transition: all 0.5s;
  }

  &:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

    .plus-icon {
      transform: rotate(180deg);
    }
  }
}
</style>